<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>商品详情页</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_408825_mx77ygssb8en4s4i.css"/>
		<link rel="stylesheet" type="text/css" href="../swiper/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/xxPublic.css"/>
		<link rel="stylesheet" type="text/css" href="../css/xxMall.css"/>
		<link rel="stylesheet" type="text/css" href="../css/members.css"/>
		
	</head>
	<style>
		.swiper-container {
		    width: 100%;
		} 
		.swiper-pagination{
			background: rgba(0,0,0,0.4);
			color: white;
			width: auto;
			left: 50%;
			transform: translateX(-50%);
			padding: 0 1rem;
			border-radius: 10px;
		}
	</style>
	<body>
		<!--
        	作者：
        	时间：2017-10-11
        	描述：轮播图
        -->
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide"><img src="../images/productDetail.png" width="100%"/></div>
		        <div class="swiper-slide"><img src="../images/productDetail.png" width="100%"/></div>
		        <div class="swiper-slide"><img src="../images/productDetail.png" width="100%"/></div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		</div>
		
		<div class="productPricebox">
			<div class="productPrice">
				&yen;5999.00<span>&yen;6999.00</span>
			</div>
			<em class="activityTit">满300元减50元</em>
		</div>
		<div class="proTitle goodFlex mb10">
			
			<div class="protitCon goodCell">
				
				Apple iPhone7/7plus 黑色128G
			</div>
			<em><i class="iconfont icon-heart"></i><b>收藏</b></em>
			
		</div>
		
		<div class="specBox mb10">
			<p>选择规格</p>
			<ul class="specList mb10">
				<li class="active">三网通64G<em></em></li>
				<li>三网通64G</li>
				<li>三网通64G</li>
				<li>三网通64G</li>
			</ul>
			<div class="specNum">
				<input type="button" name="" id="" value="-" class="minusIpt" />
				<input type="number" name="" id="" value="1" class="numIpt" />
				<input type="button" name="" id="" value="+" class="addIpt" />
			</div>
		</div>
		
		<div class="proDetailcon mb10"><!--商品详情-->
			<img src="../images/prodetail.jpg" width="100%"/>
		</div>
		<div class="proPingjia"><!--商品评价-->
		<div class="discussCon">
			<p class="discussP goodFlex">
				<span class="goodCell">评价 (1638)</span>
				好评度<i>98%</i> <em class="font-right-family">&gt;</em>
			</p>
			
			<div class="discussDiv">
				<div class="discussUser goodFlex">
					<span class="goodCell userImg"><img src="../images/userIcon.png"/>tu**怪</span>
					<span class="discussStar"><img src="../images/star5.png" width="100%"/></span>
				</div>
				<p class="goodTit">
					Iphone7 plus
					机身颜色：红色特别版
					128G
					官方标配
				</p>
				<p class="discussTxt">
					红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，
				</p>
				<ul class="discussPhoto">
					<li><img src="../images/colleImg02.jpg"/></li>
					<li><img src="../images/colleImg02.jpg"/></li>
					<li><img src="../images/colleImg02.jpg"/></li>
					<li><img src="../images/colleImg02.jpg"/></li>
				</ul>
			</div>
			<div class="discussDiv">
				<div class="discussUser goodFlex">
					<span class="goodCell userImg"><img src="../images/userIcon.png"/>tu**怪</span>
					<span class="discussStar"><img src="../images/star5.png" width="100%"/></span>
				</div>
				<p class="goodTit">
					Iphone7 plus
					机身颜色：红色特别版
					128G
					官方标配
				</p>
				<p class="discussTxt">
					红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，红色特别好看，骚气，红红火火哈，
				</p>
				<ul class="discussPhoto">
					<li><img src="../images/colleImg02.jpg"/></li>
					<li><img src="../images/colleImg02.jpg"/></li>
					<li><img src="../images/colleImg02.jpg"/></li>
					<li><img src="../images/colleImg02.jpg"/></li>
				</ul>
			</div>
			
		</div>
			<div class="moreDisscuss">
				查看全部评论
			</div>
		</div>
		
		<footer class="footerBox">
			<a href="#">
				<i class="iconfont icon-kefu"></i>
				<span>客服</span>
			</a>
			<a href="#">
				<i class="iconfont icon-heart"></i>
				<span>收藏</span>
			</a>
			<a href="#" class="proBuy">
				<button>去支付</button>
			</a>
		</footer>
		<div class="" id="footerHeight"></div>
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../swiper/swiper-3.4.2.min.js"></script>
		<script>
			$(function(){
				var mySwiper = new Swiper ('.swiper-container', {
				    direction: 'horizontal',
				    loop: true,
				    autoplay:'3000',
				    autoplayDisableOnInteraction : false,	//用户操作后不会停止
				    // 如果需要分页器
				    pagination: '.swiper-pagination',
				    paginationType : 'fraction',
				  })
				
				/*
				 * 收藏
				 */
				$('.proTitle em').on('click',function(){
					$(this).toggleClass('collected');
					if($(this).hasClass('collected')){
						$(this).find('b').text('已收藏');
					}else{
						$(this).find('b').text('收藏');
					}
				});
				
				/*
				 * 选择规格
				 */
				$('.specList').on('click','li',function(){
					if($(this).hasClass('active')){
						
					}else{
						$(this).addClass('active').siblings().removeClass('active');
						$(this).append('<em></em>').siblings().find('em').remove();
					}
					
				});
				
				/*
				 * 选择数量
				 */
				var productNum = (function(){
					
					var minus = function(numValue){
						
						if(numValue<=1){
							numValue =1;
						}else{
							numValue --;
						}
						$('.numIpt').val(numValue);
					};
					var addnum = function(numValue){
						
						if(numValue>=1000){
							numValue =1000;
						}else{
							numValue ++;
						}
						$('.numIpt').val(numValue);
					}
					return{
						minus:minus,
						addnum:addnum
					}
				})();
				$('.minusIpt').on('click',function(){	//数量减少
					var numValue = $('.numIpt').val();
					productNum.minus(numValue);
				});
				$('.addIpt').on('click',function(){		//数量增加
					var numValue = $('.numIpt').val();
					productNum.addnum(numValue);
				});
				
			})
			//获取底部导航条的高度，赋值给div作为占位
			var footHeight = $('.footerBox').height()+20;
			$('#footerHeight').height(footHeight);
		</script>
	</body>
</html>
